<script lang="ts" setup>
import { ref } from 'vue'
import CustomTabBar from '@/components/custom-tabbar.vue'

const activeTab = ref(0)

const switchTab = (index: number) => {
  activeTab.value = index
}

// 跳转到新闻详情
const onJumpDetails = () => {
  uni.navigateTo({
    url: '/pages-sub/news-details'
  })
}
</script>

<template>
  <view class="consultation">
    <image class="consultation-image" src="/static/weather.png" mode="scaleToFill" />
    <!-- tabs 通知公告 校园纲领 -->
    <view class="consultation-tabs">
      <view class="consultation-tabs-text" :class="{ 'active-tab': activeTab === 0 }" @click="switchTab(0)">
        <text>通知公告</text>
      </view>
      <view class="consultation-tabs-text" :class="{ 'active-tab': activeTab === 1 }" @click="switchTab(1)">
        <text>校园要闻</text>
      </view>
    </view>
    <!-- 活动通知 -->
    <view v-if="activeTab === 0">
      <view class="consultation-notice" v-for="item in 3" :key="item" @click="onJumpDetails">
        <h2 class="consultation-notice-h2">关于2024届秋季运动会通知</h2>
        <view class="consultation-notice-text">
          近举行的全国大学音乐大赛中，我们学校的音乐系学子斩获了多项大奖，为整个校园带来了巨大的荣耀和骄傲。这次比赛展现了他们无与伦比的音乐才华和专业技能，也充分彰显了我校音乐教育的卓越水平。</view>
        <view class="consultation-notice-time">2024/05/20</view>
      </view>
    </view>
    <!-- 校园要闻 -->
    <view v-else>
      <view class="consultation-notice" v-for="item in 2" :key="item">
        <h2 class="consultation-notice-h2">关于2024届秋季运动会通知</h2>
        <view class="consultation-notice-text">
          近举行的全国大学音乐大赛中，我们学校的音乐系学子斩获了多项大奖，为整个校园带来了巨大的荣耀和骄傲。这次比赛展现了他们无与伦比的音乐才华和专业技能，也充分彰显了我校音乐教育的卓越水平。</view>
        <view class="consultation-notice-time">2024/05/20</view>
      </view>
    </view>
    <!-- 自定义tabar -->
    <CustomTabBar />
  </view>
</template>

<style lang="scss" scoped>
.consultation {
  width: 100%;

  &-image {
    width: 100%;
    height: 300rpx;
    border-radius: $uni-border-radius;
  }

  &-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30rpx;
    margin-top: 30rpx;

    &-text {
      width: 150rpx;
      height: 45rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx 15rpx;
      background-color: $uni-bg-color;
      border-radius: 40rpx;
      color: #000000;
      font-size: 28rpx;

      &.active-tab {
        background-color: #4fb7ff;
        color: #ffffff;
      }
    }
  }

  &-notice {
    padding: 20rpx;
    margin-top: 30rpx;
    background-color: $uni-bg-color;
    border-radius: $uni-margin-top;
    box-shadow: $uni-box-shadow;

    &-h2 {
      font-size: 30rpx;
      font-weight: 700;
    }

    &-text {
      margin-top: 30rpx;
      font-size: 25rpx;
      line-height: 45rpx;
      color: $uni-text-color;
    }

    &-time {
      margin-top: $uni-margin-top;
      font-size: 25rpx;
      color: $uni-text-color;
    }
  }
}
</style>